<template>
  <div class="body">
    <section class="project-top">
      <div class="center-block">
        <div class="Crumbs clearfix">
          您的位置：
          <router-link to="/">首页<b>&gt;</b></router-link>
          <router-link to="/dataService">数据服务<b>&gt;</b></router-link>
          <a href="javascript:;">人员查询</a>
        </div>
        <div class="data-searchBox">
          <div class="indexSearchBox">
            <div class="input-group">
              <span class="input-group-btn"><i class="inSearchFdj dtFont dtFont-sousuo"></i></span>
              <input type="text" v-model="query.value" placeholder="请输入人员姓名或证件号码进行查询"
                     class="form-control inputSearch">
              <span class="input-group-btn">
						    <button @click="search" class="btn btn-default btnSearch" type="button">搜索</button>
					    </span>
            </div>
          </div>

          <div class="data-Ctrl">
            <h3 class="circular-title">筛选</h3>
            <div class="d-inputCtrl" @click="open=!open">
              <span>{{open?'收起':'展开'}}<i :class="open?'dtFont dtFont-shangla':'dtFont dtFont-xiala'"></i></span>
            </div>
          </div>

          <el-collapse-transition>
            <ul v-show="open" class="data-searchBoxSelcect">
              <li>
                <div>资质类别</div>
                <section class="aptType blockSelect">
                <span v-for="(item,index) in aptType"
                      :key="index"
                      :class="{active:item.aptNum==query.aptNum}"
                      @click="aptTab(item.aptNum)">{{item.aptName}}</span>
                </section>
              </li>
            </ul>
          </el-collapse-transition>

        </div>
      </div>
    </section>
    <section class="project-list">
      <div class="center-block">
        <div class="project-total">
          <p>查询结果：共<span>{{tableData.total}}</span>条</p>
        </div>
        <div class="project-tableBox">
          <el-table :data="tableData.list" style="width: 100%" class="data-table">
            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="compName" label="人员姓名" width="200">
              <template slot-scope="scope">
                <router-link :to="`/dataService/person/detail?id=${scope.row.staffId}`" target="_blank">
                  <span class="link">{{scope.row.staffName}}</span>
                </router-link>
              </template>
            </el-table-column>
            <el-table-column prop="staffSex" label="性别" width="120">
              <template slot-scope="scope">
                <div>{{scope.row.staffSex=="RY_XB_0001"?"男":"女"}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="cardNo" label="证件号码" width="310"></el-table-column>
            <el-table-column prop="compCeoName" label="资格类别" width="330">
              <template slot-scope="scope">
                <dl class="table-tag">
                  <dd class="b" v-if="scope.row.isReg">注册人员</dd>
                  <dd class="o" v-if="scope.row.isTitle">职称人员</dd>
                  <dd class="r" v-if="scope.row.isSafety">安管人员</dd>
                  <dd class="g" v-if="scope.row.isProf">安管人员</dd>
                  <dd class="c" v-if="scope.row.isTech">技术工人</dd>
                  <dd class="p" v-if="scope.row.isSpecial">特种人员</dd>
                </dl>
              </template>
            </el-table-column>
            <el-table-column prop="" label="人员籍贯"></el-table-column>
          </el-table>
        </div>
        <div class="block" style="padding: 20px 0">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.pg"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="query.pgsz"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.total">
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
  import {getPerList} from '@/api/dataService/index';

  export default {
    name: "person",
    data() {
      return {
        open: true,
        aptType: [
          {aptName: "不限", aptNum: ""},
          {aptName: "注册人员", aptNum: "reg"},
          {aptName: "职称人员", aptNum: "title"},
          {aptName: "安管人员", aptNum: "safety"},
          {aptName: "岗位人员", aptNum: "prof"},
          {aptName: "技术工人", aptNum: "tech"},
          {aptName: "特种作业", aptNum: "special"}
        ],
        tableData: {
          list: [],
          total: 0
        },
        query: {
          pgsz: 20,
          pg: 1,
          value: '',
          aptNum: ''
        }
      }
    },
    mounted() {
      this.getPerList();
    },
    methods: {
      aptTab(value) {
        this.query.aptNum = value;
        this.getPerList();
      },
      search() {
        this.getPerList();
      },
      handleSizeChange(val) {
        this.query.pgsz = val;
        this.getPerList();
      },
      handleCurrentChange(val) {
        this.query.pg = val;
        this.getPerList();
      },
      getPerList(data) {
        let {pg, pgsz, value, aptNum} = this.query;
        data = {pg, pgsz, value, aptNum};
        getPerList(data).then(res => {
          this.tableData.list = res.rows;
          this.tableData.total = res.total;
          // console.log(this.tableData);
        })
      }
    }
  }

</script>

